<template>
    <div class="mv-show">
        <pop-mv
            :mvList = 'popMv_mvList'
            :isLoading = 'popMv_isLoading'>
            <template v-slot:title>
                近期最受期待
            </template>
        </pop-mv>
        <div class="blank-gray"></div>
        <hot-showing
            :hotMvList = 'hotMvList'
            :isLoading = 'hotShow_isLoading'
            :hotIdList = 'hotIdList'
            :add_mv_item = 'add_mv_item'
            :fristInit = 'fristInit'
        ></hot-showing>
    </div>
</template>

<script>
import popMv from './mvShowCom/popMv.vue'
import hotShowing from './mvShowCom/hotShowing.vue'
export default {
    name: 'mvComing',
    components: {
        popMv,
        hotShowing
    },
    data() {
        return {
            popMv_mvList : [], // 最受关注的电影
            popMv_isLoading : true, // 最受关注电影加载中 
            hotMvList : [],// 已加载的热门电影
            hotShow_isLoading: true,// 热门电影正在加载中
            hotIdList : [], //最受欢迎的电影id（含未加载）
        }
    },
    mounted() {
        this.popMvInit();
    },
    methods: {
        // 加载最受欢迎的电影信息
        popMvInit(){
            var _this = this;
            this.axios
            .get("https://apis.netstart.cn/maoyan/index/mostExpected?ci=1&limit=10&offset=0")
            .then(function (response) {
                _this.popMv_mvList = response.coming;
                _this.popMv_isLoading = false;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        // 添加热门电影的数量,参数是电影的id   ////////////////////////
        add_mv_item(url) {
            this.hotShow_isLoading = true;
            this.axios.get('https://apis.netstart.cn/maoyan/index/moreComingList?movieIds='+url)
            .then((success)=>{
                // console.log(success);
                var newItem = success.coming;
                newItem.forEach( item => {
                    item.img = item.img.replace(/w.h/,"170.230");
                });
                this.hotMvList = this.hotMvList.concat(newItem);
                this.hotShow_isLoading = false;
            })
            .catch((err)=> {
                console.log(err);
            })
        },
        // 热门电影第一次加载
        fristInit() {
            this.axios.get('https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=10')
            .then((success)=>{
                // console.log(success);
                this.hotIdList = success.movieIds;
                // console.log("id-num:",this.hotIdList.length);
                var newItem = success.coming;
                // console.log('newItem:',newItem);
                newItem.forEach( item => {
                    // console.log(typeof item.img);
                    // console.log('item.img1',item.img);
                    item.img = item.img.replace(/w.h/,"170.230");
                    // console.log('item.img2',item.img);
                });
                // console.log('newItem',newItem);
                this.hotMvList = this.hotMvList.concat(newItem);
                // console.log(this.hotMvList);
                this.hotShow_isLoading = false;
            })
            .catch((err)=> {
                console.log(err);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mv-show {
    font-size: 24px;
}
.blank-gray {
    height: 20px;
    background: #F5F5F5;
}
</style>